<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>双十一倒计时</title>
    <script src="js/jquery-3.2.1.min.js"></script>
    <style>
        .box{
          margin: 0 auto;
          width: 210px;
        }
        .box div {
          width: 50px;
          height: 50px;
          border: 1px solid #ccc;
          /* margin-left: 8px; */
          line-height: 50px;
          /* text-align: center; */
          color: red;
          float: left;
          background-color: orange;
        }
    
        .double11 {
          text-align: center;
          height: 200px;
          width: 300px;
          margin: 0 auto;
        }
      </style>
</head>
<body>
    <div class="double11">
        <h1>距离国庆节，还有</h1>
        <div class="box">
          <div id="d"></div> <!-- 剩余的天数 -->
          <div id="h"></div> <!-- 剩余的小时 -->
          <div id="m"></div> <!-- 剩余的分钟 -->
          <div id="s"></div> <!-- 剩余的秒数 -->
        </div>
      </div>
    <script>
        //设置秒杀结束时间
        var endTime=new Date('2021-10-01 0:00:00'),
        endSeconds=endTime.getTime();
        //设置定时器，实现限时秒杀效果
        var id=setInterval(seckill,1000);

        function seckill(){
            var nowTime=new Date();
            //获取当前时间，获取时间差，单位为秒
            var remaining =parseInt((endSeconds-nowTime.getTime())/1000);
            var d=h=s=m=0;
            if(remaining>0){
                d = parseInt(remaining / 86400);
                h = parseInt((remaining / 3600) % 24);
                m = parseInt((remaining / 60) % 60);
                s = parseInt(remaining % 60);
            }else{
                clearInterval(id);
            }
            $("#d").html((d < 10 ? '0' + d : d) + '天');
            $("#h").html((h < 10 ? '0' + h : h) + '时');
            $("#m").html((m < 10 ? '0' + m : m) + '分');
            $("#s").html(( s< 10 ? '0' + s : s) + '秒');
        }
    </script>
</body>
</html>